<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JMSDemo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/libs/jquery-2.2.3.min.js"></script>
    <script src="js/libs/vue.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="jmsdemo.html">Demo</a>
            <a class="navbar-brand" href="jmsdemo.html">JMSDemo</a>
        </div>
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="form-group  col-md-6">
            <div class="col-md-3">
                <label for="jms">input message</label>
            </div>
            <div class="col-md-7">
                <input type="text" class="form-control" id="jms" placeholder="message" v-model="inputMsg"
                       @keyup.enter="postMsg">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary" v-on:click="postMsg">send</button>
            </div>
        </div>
        <div class="form-group  col-md-6">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Message</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="msg in messages">
                    <td>{{msg.id}}</td>
                    <td>{{msg.text}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    vm = new Vue({
        el: 'body',
        data: {
            messages: [{id: 0, text: 'no message'}],
            inputMsg: "",
            max: 0
        },
        methods: {
            postMsg: function () {
                $.ajax("rest/jms/" + this.inputMsg, {
                    method: 'POST',
                    success: function (data) {
                        if (data['result'] == 'error') {
                            alert("Send message has error");
                        }
                    },
                    error: function () {
                        alert("Send message has error");
                    }
                })
            },
            loadMsg: function () {
                $.ajax("rest/jms", {
                    method: 'GET',
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        if (data['result'] == 'error') {
                            alert("Receive message has error");
                        } else {
                            if (data.length > 0) {
                                var tmp = [];
                                for (var i = data.length - 1; i >= 0; i--) {
                                    vm.max++;
                                    tmp.push({id: vm.max - (data.length - i) + i, text: data[i]});
                                }
                                for (var i in vm.messages) {
                                    if (vm.messages[i].id != 0 && vm.messages[i].id > (vm.max - 21))
                                        tmp.push(vm.messages[i])
                                }
                                vm.messages = tmp
                            }
                        }
                    },
                    error: function () {
                        alert("Send message has error");
                    }
                })
            }
        }
    });

    setInterval(vm.loadMsg, 1000);
</script>
</body>
</html>